<template>
  <div>
    <el-collapse :value="['1', '2', '3', '4']">
      <el-collapse-item title="时间相关" name="1">
        <div class="m-dataList">
          <el-table
            :data="dataListA"
            ref="dataListA"
            v-loading="dataListLoadingA"
            element-loading-text="loading..."
            :max-height="300"
            style="width: 100%"
          >
            <el-table-column
              prop="account_no"
              width="200"
              label="模拟账号">
            </el-table-column>
            <el-table-column
              prop="platform"
              width="80"
              label="交易平台">
            </el-table-column>
            <el-table-column
              prop="open_account_date"
              :formatter="countTimeFormat"
              label="开户时间"
              width="160">
            </el-table-column>
            <el-table-column
              prop="last_open"
              label="最近开仓时间"
              :formatter="countTimeFormat"
              width="160">
            </el-table-column>
            <el-table-column
              prop="last_close"
              label="最近平仓时间"
              :formatter="countTimeFormat"
              width="160">
            </el-table-column>
            <el-table-column
              prop="last_login"
              label="最近登入时间"
              :formatter="countTimeFormat"
              min-width="160">
            </el-table-column>
          </el-table>
        </div>
      </el-collapse-item>
      <el-collapse-item title="金额相关" name="2">
        <div class="m-dataList">
          <el-table
            :data="dataListB"
            ref="dataListB"
            v-loading="dataListLoadingB"
            element-loading-text="loading..."
            :max-height="300"
            style="width: 100%"
          >
            <el-table-column
              prop="account_no"
              width="200"
              label="模拟账号">
            </el-table-column>
            <el-table-column
              prop="platform"
              width="80"
              label="交易平台">
            </el-table-column>
            <el-table-column
              prop="account_currency"
              label="账号货币"
              width="120">
            </el-table-column>
            <el-table-column
              prop="totalProfitDeficit"
              label="累计总盈亏"
              align="right"
              :formatter="countDateMoneyFormat"
              width="200">
            </el-table-column>
            <el-table-column
              min-width="120">
            </el-table-column>
          </el-table>
        </div>
      </el-collapse-item>
      <el-collapse-item title="成交相关" name="3">
        <div class="m-dataList">
          <el-table
            :data="dataListC"
            ref="dataListC"
            @sort-change="(data)=>{tableSortBy('C',data)}"
            v-loading="dataListLoadingC"
            element-loading-text="loading..."
            :max-height="300"
            style="width: 100%"
          >
            <el-table-column
              prop="accountNo"
              width="200"
              label="模拟账号">
            </el-table-column>
            <el-table-column
              prop="platform"
              width="80"
              label="交易平台">
            </el-table-column>
            <el-table-column
              prop="symbol"
              label="产品"
              sortable="custom"
              min-width="120">
            </el-table-column>
            <el-table-column
              prop="openCount"
              sortable="custom"
              label="开仓总笔数"
              width="120">
            </el-table-column>
            <el-table-column
              prop="closeCount"
              label="平仓总笔数"
              sortable="custom"
              width="120">
            </el-table-column>
            <el-table-column
              prop="openSum"
              label="开仓总手数"
              sortable="custom"
              width="120">
            </el-table-column>
            <el-table-column
              prop="closeSum"
              label="平仓总手数"
              sortable="custom"
              min-width="120">
            </el-table-column>
          </el-table>
        </div>
      </el-collapse-item>
      <el-collapse-item title="登录相关" name="4">
        <div class="m-dataList">
          <el-table
            :data="dataListD"
            v-loading="dataListLoadingD"
            element-loading-text="loading..."
            ref="dataListD"
            :max-height="300"
            style="width: 100%"
          >
            <el-table-column
              prop="customerno"
              width="200"
              label="模拟账号">
            </el-table-column>
            <el-table-column
              prop="platform"
              label="交易平台"
              width="80">
            </el-table-column>
            <el-table-column
              prop="login_count"
              label="登入次数"
              min-width="120">
            </el-table-column>
          </el-table>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
  import * as Utils from '@/utils'
  import * as RealaccountAPI from '@/Api/realaccount'
  import * as LeadsAPI from '@/Api/lead';
  export default {
    name: 'TheStatisticsDemo',
    data () {
      return {
        dataListA: [],
        dataListLoadingA:false,
        sortInfoA:{},

        dataListB: [],
        dataListLoadingB:false,
        sortInfoB:{},

        dataListC: [],
        dataListLoadingC:false,
        sortInfoC:{},

        dataListD: [],
        dataListLoadingD:false,
        sortInfoD:{},
      }
    },
    props: ['type'],
    computed: {
      queryId(){
          if(this.type == '1') {
            return this.$route.params.id.split('_')[2]
          } else  {
            return this.$route.params.id.split('_')[1]
          }
      }
    },
    methods: {
      queryList(type){
        if (['A', 'B', 'C', 'D'].indexOf(type) < 0) {
          console.log('type参数有误');
          return;
        }
        this['dataListLoading'+type] = true;
        if (this.$refs['dataList'+type]) {
          this.$refs['dataList'+type].bodyWrapper.scrollTop = 0;
        }
        let ajaxAddress = null;
        if (this.type == '2') {
          ajaxAddress = LeadsAPI['leadInfo5_1_' + type];
        } else {
          ajaxAddress = RealaccountAPI['realaccountInfo5_2_' + type];
        }
        if (this.$refs['dataList' + type]) {
          this.$refs['dataList' + type].bodyWrapper.scrollTop = 0;
        }
        ajaxAddress(Object.assign({
          queryId: this.queryId,
        },this['sortInfo'+type]))
          .then(res => {
            this['dataListLoading'+type] = false;
            if (res.code != '0') {
              this.$notify({
                type: 'warning',
                title: '温馨提示',
                message: res.msg,
              })
              return;
            }
            if(type == '1') {
              if(type == 'C') {
                this['dataList' + type] = res.data;
              } else  {
                this['dataList' + type] = res.data.object;
              }
            } else {
              this['dataList' + type] = res.data;
            }

          })
          .catch(error => {
            this['dataListLoading'+type] = false;
            console.log(error);
          })
      },
      tableSortBy(type,data) {
        if (!data.order) {
          return;
        }
        this['sortInfo'+type].orderParam = data.prop;
        this['sortInfo'+type].orderType = data.order.substr(0, data.order.length - 6);
        this.queryList(type);
      },
      countTimeFormat(row, column){
        return Utils.countDateTimeFormat(row[column.property])
      },
      countDateMoneyFormat(row, column){
        return Utils.countDateMoneyFormat(row[column.property])
      },
    },
    created(){
      this.queryList('A');
      this.queryList('B');
      this.queryList('C');
      this.queryList('D');
    }
  }
</script>

<style scoped lang="scss">
</style>
